<template>
    <div class="chose-case" style="width: 100%;">
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="选择案件" style="position: relative;top: 10px;left: 5px;">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <el-form :model="params" style="width: 100%;">
            <el-container>
                <!--内容-->
                <el-form-item>
                    <el-input v-model="params.content" style="width: 200px;" placeholder="案号搜索"></el-input>
                </el-form-item>
                <el-form-item style="margin-left: 10px">
                    <el-button type="primary" @click="handleSearch">检索</el-button>
                </el-form-item>
                <el-form-item style="position: absolute;right: 50px">
                    <h2>点击行选中案件</h2>
                </el-form-item>
            </el-container>
        </el-form>

        <el-table :border="true" :data="pageResult.records" @row-click="handleClick">
            <el-table-column prop="id" v-if="false"></el-table-column>
            <el-table-column label="案号" prop="caseNo" width="150px"></el-table-column>
            <el-table-column label="收案日期" prop="collectionTime" width="100px"></el-table-column>
            <el-table-column label="委托人" prop="caseWtr"></el-table-column>
            <el-table-column label="对方当事人" prop="caseOppositeParties" width="100px"></el-table-column>
            <el-table-column label="承办律师" prop="caseAttorney" width="200px"></el-table-column>
            <el-table-column label="结案" prop="caseSettleStatus">
                <template slot-scope="scope">
                    {{scope.row.caseSettleStatus == 'Y'?'已结案': '未结案'}}
                </template>
            </el-table-column>
            <el-table-column label="代理费" prop="caseAgencyfee" width="70px"></el-table-column>
            <el-table-column label="已付款" prop="casePaidsal" width="70px"></el-table-column>
            <el-table-column label="未付款" prop="caseUnpaidsal" width="70px"></el-table-column>
            <el-table-column label="已开票" prop="caseInvoiced" width="70px"></el-table-column>
            <el-table-column label="未开票" prop="caseNotinvoiced" width="70px"></el-table-column>
            <el-table-column label="收案审批" prop="caseApproveStatus" width="80px">
                <template slot-scope="scope">
                    {{
                    scope.row.caseApproveStatus == '1'?'审批中':
                    scope.row.caseApproveStatus == '2'?'审批不通过':'审批通过'
                    }}
                </template>
            </el-table-column>
            <el-table-column label="收案审批人" prop="systemApprovalName" width="100px"></el-table-column>
        </el-table>

        <el-footer class="case-list-footer">
            <el-pagination
                    style="margin: 10px auto"
                    background
                    layout="prev, pager, next"
                    :total="pageResult.total"
                    :page-size="pageResult.size"
                    class="pagination"
                    @current-change="handleIndexChange"
            >
            </el-pagination>
        </el-footer>
    </div>
</template>

<script>
    import CaseLawService from '../../../model/gs/CaseLawService.js'

    const caseLawService = CaseLawService.getInstance()
    export default {
        data() {
            return {
                params:{
                    field:'case_no',
                    content:'',
                    tab:'total',
                    recycle:'N',
                    settleStatus:'N'
                },
                pageResult:[],
                id:'',
                checkedList:[]
            }
        },
        methods:{
            goBack(){
                this.$emit('setLaw',{})
            },
            //获取案件的方法
            getCaseLaws(){
                caseLawService.getByPage(this.params).then(response => {
                    if(response.data.code === 0){
                        this.pageResult = response.data.data
                    }
                })
            },
            handleClick(law){
                this.$emit('setLaw',law)
            },
            handleSearch(){
                this.params.page = 1
                this.getCaseLaws()
            },
            //当前页放生变化的事件
            handleIndexChange(index){
                this.params.page = index
                this.getCaseLaws()
            }
        },
        created(){
            this.getCaseLaws()
        }
    }
</script>

<style scoped>
    .case-list-footer{
        width: 100%;
        height: 10%;
        position: relative;
    }
    .case-list-footer .pagination{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
</style>
